<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>02_JSX</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript">
    const msg = "I Like You!";
    const myId = 'Atguigu';

    // 创建虚拟dom
    const vDom1 = React.createElement("h2", {id: myId.toLowerCase()}, msg.toUpperCase());
    // 渲染虚拟dom
    ReactDOM.render(vDom1, document.getElementById("test1"));


</script>
<script type="text/babel">
    // 创建虚拟dom
    const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>;
    // 渲染dom
    ReactDOM.render(vDom2, document.getElementById("test2"));
</script>

</body>
</html>
